<script>
import {reactive, shallowReactive, ref, shallowRef, readonly, shallowReadonly, onMounted, isProxy, isReactive, isReadonly, isRef, toRaw} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
      isProxy：检查对象是否由reactive或readonly创建的proxy对象
    */
    const person = reactive({name: "陶品奇", age: 22,})
    const address = readonly({address: "衡阳"})
    const count = ref(0)
    console.log(isProxy(address)) // 检查reactive函数创建出来的响应式对象 true
    console.log(isProxy(person))// 检查readonly函数创建出来的只读对象 true
    console.log(isProxy(count)) //false


    /*
      isReactive:检查对象是否由reactive创建的响应式代理
    */
    const mobile = reactive({name: "苹果", price: 2999})
    console.log(isReactive(mobile)) //true
    console.log(isReadonly(address))//true

    /*
      isRef:isRef()检查某个值是否为 ref
    */
    const num = ref(0)
    console.log(isRef(num))//true

    /*
      isReadonly:检查对象是否由readonly创建的只读代理
    */

    const school = readonly({
      name: "陶品奇",
      age: 22
    })
    console.log(isReadonly(school)) //true

    /*
      toRaw:返回reactive或者readonly代理的原始对象
    */
    const phobe = reactive({name: "华为", price: 111})
    console.log(phobe) //proxy对象
    console.log(toRaw(phobe))//原始对象
  }
}
</script>
<template>
  <div id="app">

  </div>
</template>

<style lang="less">

</style>
